<template>
    <el-row :gutter="20" class="panel-group">
        <template v-for="(item,index) in PanelGroupData">
            <el-col :span="Math.floor(24/Number(col))" class="card-panel-col" :key="index">
                <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                    <div class="card-panel-icon-wrapper" :class="item.color" v-if="item.icon">
                        <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">
                            {{item.label}}
                        </div>
                        <!-- <count-to :decimals="2" :prefix="item.prefix" :start-val="0" :end-val="item.value" :duration="5000" class="card-panel-num" /> -->
                        <div  class="card-panel-num" >{{item.value}}</div>
                    </div>
                    <div class="card-panel-button" v-if="item.button">
                        <el-button type="text" class="button" @click="onClick(item)">{{item.button}}</el-button>
                    </div>
                </div>
            </el-col>
        </template>
    </el-row>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
    components: {
        CountTo
    },
    props: {
        col: {
            type: Number,
            default: 4,
        },
        PanelGroupData: {
            type: Array,
            default() {
                return [
                    { icon: 'peoples', color: 'icon-green', label: '访客', prefix: '', value: 102400, button: '' },
                    { icon: 'message', color: 'icon-blue', label: '消息', prefix: '', value: 81212, button: '' },
                    { icon: 'money', color: 'icon-red', label: '金额', prefix: '￥', value: 9280, button: '' },
                    { icon: 'shopping', color: 'icon-green', label: '订单', prefix: '', value: 13600, button: '' },
                ];
            },
        },
    },
    methods: {
        handleSetLineChartData(type) {
            this.$emit('handleSetLineChartData', type)
        },
        onClick(item) {
            console.log(item);
            if ('function' === typeof item.btnEvent) {
                item.btnEvent(item);
            }
            this.$emit('click', item);
        }
    }
}
</script>

<style lang="scss" scoped>
.panel-group {
    // margin-top: 18px;
    // transform: scale(.95);
    * {
        white-space: nowrap !important;
    }

    .card-panel-col {
        margin-bottom: 32px;
    }

    .card-panel {
        // height: 85px;
        // cursor: pointer;
        font-size: 12px;
        position: relative;
        // overflow: hidden;
        color: #666;
        // background: #fff;
        // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border: 1px solid #eaecef;
        // border-color: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-blue {
                background: #36a3f7;
            }

            .icon-red {
                background: #f4516c;
            }

            .icon-green {
                background: #34bfa3;
            }
        }

        .icon-blue {
            color: #36a3f7;
        }

        .icon-red {
            color: #f4516c;
        }

        .icon-green {
            color: #34bfa3;
        }

        .card-panel-icon-wrapper {
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 48px;
        }

        .card-panel-description {
            width: 100%;
            padding: 10px;
            font-weight: bold;
            // margin: 26px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 16px;
            }
        }

        .card-panel-button {
            position: absolute;
            right: 20px;
            bottom: 0;
        }
    }
}

@media (max-width: 550px) {
    .card-panel-description {
        display: none;
    }

    .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
            display: block;
            margin: 14px auto !important;
            float: none !important;
        }
    }
}
</style>
